<script>
/**
 * @desc 首页的4个(或者多个)分类内容导航按钮
 */

import { navTo } from '@/utils'
import iconA from '@/assets/icons/house.png'
import iconB from '@/assets/icons/travel.png'
import iconC from '@/assets/icons/travel-guide.png'
import iconD from '@/assets/icons/advice.png'
import ServiceLayer from '@/components/service-layer.vue'

export default {
  name: 'home-nav',
  props: {
    showService: Boolean,
    handleService: Function
  },
  components: { ServiceLayer },
  data: () => ({
    iconA,
    iconB,
    iconC,
    iconD
    // list: [
    //   { icon: iconA, text: '民宿酒店' },
    //   { icon: iconB, text: '旅游路线' },
    //   { icon: iconC, text: '游玩攻略' },
    //   { icon: iconD, text: '签证咨询' }
    // ]
  }),
  methods: {
    handleGoto() {
      wx.navigateTo({ url: '/pages/travel-list/main' })
    }
  }
}
</script>

<template>
  <div class="home-nav">
    <div
      class="item"
      @click="()=>handleService(true)"
    >
      <img :src="iconB" class="icon" />
      <p class="text">旅游路线</p>
    </div>
    <div
      class="item"
      @click="handleCall"
    >
      <img :src="iconD" class="icon" />
      <p class="text">咨询客服</p>
    </div>
    <service-layer :show="showService" :handleClose="()=>handleService(false)" />
  </div>
</template>

<style lang="scss" scoped>
$icon-size: 4em;

.home-nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #fff;
  font-size: 12px;

  .icon {
    display: block;
    margin: 0 auto;
    width: $icon-size;
    height: $icon-size;
  }
  .text {
    margin-top: 10px;
    text-align: center;
  }
}
</style>
